<template>
	<view class="content">
		<view style="position: fixed;width: 750rpx;z-index: 10;padding: 0rpx 32rpx;background: #FFFFFF;">
		 <!-- <u-search placeholder="搜索" v-model="keyword" :show-action="false" :height="68"></u-search> -->
		 <u-tabs :list="tabList" style="margin-top: 18rpx;" :is-scroll="false" active-color="#0052D9" inactive-color="#858A99" :current="current" 
		 @change="change"></u-tabs>
		</view>
		
		<view style="width: 750rpx;height: 110rpx;background: #FFFFFF;"></view>
		<!-- 发起签到 -->
		<view class="allwrap" v-if="start == 0 && current == 0">
			<view style="width: 750rpx; height: 29rpx;"></view>
			<view class="frame-block">
				<view class="block-content flexal">
					<view style="font-weight: 400;font-size: 30rpx;color: #000000;flex:1">签到时长</view>
					<u-input v-model="value" :type="type" :border="border" :custom-style="{'text-align': 'right'}" placeholder="请选择签到时长" @click="show = !show" />
					<image src="/static/right.png" style="width: 14rpx;height: 24rpx;margin-left: 10rpx;"></image>
				</view>
				<view class="frame-line"></view>
				<view class="block-content flexal">
					<view style="font-weight: 400;font-size: 30rpx;color: #000000;flex:1">签到说明</view>
					<view style="font-weight: 400;font-size: 26rpx;color: #6E6E6E;">0/20</view>
				</view>
				<view class="block-content flexal">
					<u-input v-model="areaParams.value" :type="areaParams.type" :border="areaParams.border" 
					placeholder="请输入签到说明（选填）"
					:height="areaParams.height" :auto-height="areaParams.autoHeight" />
				</view>
			</view>
			<view style="display: flex;margin-top: 50rpx;">
				<view class="frame-icon flexcen">i</view>
				<view class="frame-icon-text">发起签到后，其他成员将收到签到应用通知，成员可在签到窗口完成签到</view>
			</view>
			<view class="frame-buttom flexcen">
				立即发起
			</view>
		</view>
		<!-- 已发起签到 -->
		<view class="allwrap" v-if="start == 1 && current == 0">
			<view style="width: 750rpx; height: 97rpx;"></view>
			
			<view class="flexcen">
				<u-circle-progress active-color="#0052D9" :percent="percentage" :bg-color="'#F3F4F6'" :duration="0" :width="376" :border-width="30">
						<view class="flexcumal">
							<view class="u-progress-dot">剩余时间</view>
							<text class='u-progress-info'>{{format()}}</text>
						</view>
				</u-circle-progress>
			</view>
			<view class="flexcen" style="margin-top: 15rpx;">
				<view class="sign-text">已签到：<span style="font-size: 40rpx;color: #2953E7;">1</span>人</view>
			</view>
			<view class="flexcen" style="margin-top: 15rpx;">
				<view class="sign-text">您可以在【签到记录】中查看详细记录</view>
			</view>
			
			<view class="frame-buttom flexcen" style="border: 2rpx solid #0052D9;background: #F3F4F6;color: #0052D9;">
				终止签到
			</view>
		</view>
		<!-- 签到记录 -->
		<view class="allwrap" v-if="current == 1">
			
			<view class="frame-record flexal" v-for="(item,index) in record" :key="index" @click="go('/pages6/metting/signDetail')">
				<view style="flex: 1;">
					<view>3人签到</view>
					<view class="flexal" style="margin-top: 20rpx;">
						<view class="frame-block"  :style="{'background':item.status ? '#366EF4':'#858A99'}" ></view>
						<view class="record-text flexal" :style="{'color':item.status ? '#366EF4':'#858A99'}" >{{item.status? '进行中':'已结束'}} <span style="color: #858A99;margin-left: 24rpx;">2024/08/05 10:00 发起</span> </view>
					</view>
				</view>
				<image src="/static/right.png" style="width: 14rpx;height: 24rpx;"></image>
			</view>
			
		</view>
		
		<u-picker mode="time" v-model="show" :params="params" @confirm="confirmDate"></u-picker>
		<!-- 电话提示滑动快 -->
		<movablearea1 :movaheight="movaheightAll" v-if="movableareaShow" @editMovaheightAll="editMovaheightAll" :movaTop="movaTopAll"></movablearea1>
	</view>
</template>
<script>
	export default {
		components: {
			
		},
		data() {
			return {
				tabList:[{
					name: '发起签到'
				}, {
					name: '签到记录'
				}],
				value: '',
				type: 'text',
				border: false,
				areaParams:{
					value: '',
					type: 'textarea',
					border: false,
					height: 150,
					autoHeight: true,
				},
				current:1,
				show:false,
				params: {
					year: false,
					month: false,
					day: false,
					hour: false,
					minute: true,
					second: false
				},
				start:1							,//是否发起签到 0:待发起  1:已发起
				percentage:0,					//签到剩余时间百分比
				seconds: 0, //秒数
				timer: null, //定时器
				sumSeconds: 60, //总秒数
				surplusSeconds: 10, //剩余秒数
				num4: 1, //分钟
				record:[
					{
						status:0
					},
					{
						status:1
					},{
						status:0
					},
				]
 			}
		},
		onLoad() {
			let data = this.getTimes(this.surplusSeconds)
			this.num4 = data.m
			this.seconds = data.s
			this.Time() //调用定时器
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			
		},
		methods: {
			
			// 修改tabs
			change(index){
				this.current = index;
			},
			confirmDate(e){
				console.log('e',e)
				this.value = e.minute + '分钟'
			},
			// 剩余时间
			format() {
				// console.log('分钟',this.num4)
				var stotal = this.surplusSeconds
				let second = stotal % 60
				//总分钟
				let mintotal = (stotal - second) / 60
				//分钟
				let min = mintotal % 60

				//小时
				let hour = (mintotal - min) / 60
				let hstr = `${hour.toFixed(0)}`
				let mstr = `${min.toFixed(0)}`
				let sstr = `${second.toFixed(0)}`
				if (hour < 10) {
					hstr = `0${hour.toFixed(0)}`
				}
				if (min < 10) {
					mstr = `0${min.toFixed(0)}`
				}
				if (second < 10) {
					sstr = `0${second.toFixed(0)}`
				}

				// return `${hstr}:${mstr}:${sstr}`
				return `${mstr}:${sstr}`
			},
			clearTime() { //清除定时器
				clearInterval(this.timer);
			},
			//定时器没过1秒参数减1
			Time() {
				if (this.timer) clearInterval(this.timer)
				this.timer = setInterval(this.getRestTime, 1000)

				// this.clearTimeSet = setInterval(this.getRestTime, 1000)
			},
			getRestTime() {
				if (this.surplusSeconds <= 0) {
					console.log('我进来了',this.surplusSeconds)
					this.signShow = false
					this.clearTime()
					return
				}
				this.surplusSeconds -= 1
				this.percentage = (this.surplusSeconds / this.sumSeconds) * 100

				this.format()
			},
		},
		onReachBottom() {
			
		},
	}
</script>
<style scoped lang="less">
	
	.content{
		background: #F3F4F6;
	}
	
	.frame-block{
		
		// margin-left: 32rpx;
		// padding-top: 32rpx;
		width: 686rpx;
		// height: 199rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.block-content{
		// display: grid;
		padding: 18rpx 32rpx;
	}
	.frame-line{
		margin-left: 32rpx;
		width: 622rpx;
		height: 0rpx;
		border: 1rpx solid #707070;
		opacity: 0.17;
	}
	.button{
		position: fixed;
		bottom: 98rpx;
		width: 686rpx;
		height: 80rpx;
		background: #0052D9;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: normal;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	.frame-icon{
		margin-top: 5rpx;
		width: 30rpx;
		height: 30rpx;
		// background: #858A99;
		color: #858A99;
		font-size: 20rpx;
		border-radius: 50%;
		font-weight: 700;
		border: 5rpx solid #858A99;
	}
	.frame-icon-text{
		margin-left: 12rpx;
		width: 644rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #858A99;
		line-height: 42rpx;
	}
	.frame-buttom{
		position: fixed;
		bottom: 98rpx;
		width: 686rpx;
		height: 80rpx;
		background: #0052D9;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: normal;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	.u-progress-dot{
		font-weight: normal;
		font-size: 24rpx;
		color: #858A99;
	}
	.u-progress-info{
		font-weight: 500;
		font-size: 80rpx;
		color: #15181D;
	}
	.sign-text{
		font-weight: normal;
		font-size: 30rpx;
		color: #15181D;
	}
	.frame-record{
		padding: 0rpx 32rpx;
		margin-top: 32rpx;
		width: 686rpx;
		height: 146rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		
		.frame-block{
			width: 18rpx;
			height: 18rpx;
			background: #366EF4;
			border-radius: 50%;
		}
		.record-text{
			margin-left: 12rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #366EF4;
		}
	}
	
</style>